<template>
  <el-dialog
    :title="!dataForm.telnetId ? '添加人才' : '修改人才信息'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%"
    >
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="80px">

      <el-row>
        <el-col :span="24">
          <h4>人才基本信息</h4>
        </el-col>

        <el-col :span="8">
          <el-form-item label="头像">
            <div class="advatar_container">
              <el-upload
                name="photo"
                class="avatar-uploader"
                :action="uploadAdvatorUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">

                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="姓名" prop="telnetName">
            <el-input v-model="dataForm.telnetName" placeholder="姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="年龄" prop="telnetAge">
            <el-input v-model="dataForm.telnetAge" placeholder="年龄"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="性别" prop="telnetGender">
            <el-select v-model="dataForm.telnetGender">
              <el-option value="1" label="男"></el-option>
              <el-option value="0" label="女"></el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="学历" prop="educationId">
            <el-select v-model="dataForm.educationId">
              <el-option
                v-for="item in educationOption"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                @chang="positionEducationOptionChange"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="毕业院校" prop="graduateUniversity">
            <el-input v-model="dataForm.graduateUniversity" placeholder="毕业院校"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="联系电话"></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="联系微信" prop="wechat">
            <el-input v-model="dataForm.wechat" placeholder="联系微信"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="所学专业" prop="major">
            <el-input v-model="dataForm.major" placeholder="所学专业"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工龄" prop="workAge">
            <el-input v-model="dataForm.workAge" placeholder="工龄"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="地址信息" prop="provinceid">
            <el-cascader
              clearable
              v-model="addressOptionsArr"
              :options="addressOptions"
              @change="handleChangeAddress">
            </el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="行业信息" prop="tradeId">
            <el-cascader
              clearable
              v-model="industryOptionsArr"
              :options="industryOptions"
              @change="handleChangeIndustory">
            </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <h4>
            教育经历
            <el-button icon="el-icon-plus"
                       style="margin-left: 75%"
                       type="primary"
                       size="small"
                       @click="addOneEducation()"
                        >添加一条教育经历</el-button>
          </h4>
        </el-col>
      </el-row>

      <el-row v-for="(eduItem) in dataForm.educationList" :key="eduItem.index">
        <el-col :span="6">
          <el-form-item label="学校名称" prop="universityName">
            <el-input v-model="eduItem.universityName" placeholder="学校名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="专业" prop="major">
            <el-input v-model="eduItem.major" placeholder="专业"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="取的学历" prop="getEducationId">
            <el-select v-model="eduItem.getEducationId">
              <el-option
                v-for="item in educationOption"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                @chang="positionEducationOptionChange"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="毕业时间" prop="graduateTime">
            <!--<el-input v-model="eduItem.graduateTime" placeholder="毕业时间"></el-input>-->
            <div class="block">
              <el-date-picker
                style="width: 150px"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="eduItem.graduateTime"
                type="datetime"
                placeholder="选择毕业日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <h4>
            工作履历
            <el-button icon="el-icon-plus"
                       style="margin-left: 75%"
                       type="primary"
                       size="small"
                       @click="addOneworkExp"
                       >添加一条工作履历</el-button>
          </h4>
        </el-col>
      </el-row>


      <el-row v-for="(workItem) in dataForm.workTrackRecordList" :key="workItem.index">
        <el-col :span="12">
          <el-form-item label="单位名称" prop="companyName">
            <el-input v-model="workItem.companyName" placeholder="单位名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="担任职务" prop="holdAPost">
            <el-input v-model="workItem.holdAPost" placeholder="担任职务"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="开始时间" prop="workBeginTime">
            <div class="block">
              <el-date-picker
                style="width: 350px"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="workItem.workBeginTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="结束时间" prop="workEndTime">
            <div class="block">
              <el-date-picker
                style="width: 350px"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="workItem.workEndTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    inject:["reload"],
    data () {
      return {
        visible: false,
        dataForm: {
          telnetId: 0,
          telnetName: '',
          telnetAge: '',
          telnetGender: '',
          educationId: '',
          graduateUniversity: '',
          phone: '',
          wechat: '',
          major: '',
          workAge: '',
          provinceid: '',
          cityid: '',
          areaid: '',
          tradeId: '',
          classifyId: '',
          jobTypeId: '',
          advator:'',
          isDeleted: '',
          createTime: '',
          updateTime: '',
          educationList:[
            {
              universityName: '',
              major: '',
              getEducationId: '',
              graduateTime: '',
              isDeleted: '',
              createTime: '',
              updateTime: '',
              isDeleted: '',
              createTime: '',
              updateTime: ''
            }
          ],
          workTrackRecordList:[
            {
              companyName: '',
              holdAPost: '',
              workBeginTime: '',
              workEndTime: '',
              isDeleted: '',
              createTime: '',
              updateTime: ''
            }
          ],
        },

        uploadAdvatorUrl:'',  //头像要提交的地址路径信息
        imageUrl:'',          //头像地址

        educationOption:[],

        industryOptions:[],             //行业信息
        industryOptionsArr:[],          //行业信息数据

        addressOptions:[],              //地址信息
        addressOptionsArr:[],           //地址信息数据


        dataRule: {
          telnetName: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          telnetAge: [
            { required: true, message: '年龄不能为空', trigger: 'blur' }
          ],
          telnetGender: [
            { required: true, message: '性别不能为空', trigger: 'blur' }
          ],
          educationId: [
            { required: true, message: '学历不能为空', trigger: 'blur' }
          ],
          graduateUniversity: [
            { required: true, message: '毕业院校不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' }
          ],
          wechat: [
            { required: true, message: '联系微信不能为空', trigger: 'blur' }
          ],
          major: [
            { required: true, message: '所学专业不能为空', trigger: 'blur' }
          ],
          workAge: [
            { required: true, message: '工龄不能为空', trigger: 'blur' }
          ],
          provinceid: [
            { required: true, message: '省份不能为空', trigger: 'blur' }
          ],
          cityid: [
            { required: true, message: '城市不能为空', trigger: 'blur' }
          ],
          areaid: [
            { required: true, message: '地区不能为空', trigger: 'blur' }
          ],
          tradeId: [
            { required: true, message: '行业一级分类不能为空', trigger: 'blur' }
          ],
          classifyId: [
            { required: true, message: '行业二级分类不能为空', trigger: 'blur' }
          ],
          jobTypeId: [
            { required: true, message: '行业三级分类不能为空', trigger: 'blur' }
          ],
          isDeleted: [
            { required: true, message: '逻辑删除字段不能为空', trigger: 'blur' }
          ],
          createTime: [
            { required: true, message: '创建时间不能为空', trigger: 'blur' }
          ],
          updateTime: [
            { required: true, message: '更新时间不能为空', trigger: 'blur' }
          ]
        }
      }
    },

    mounted () {
      this.reloadIndustory()
      this.reloadAddress()
      this.reloadEducation()
      this.talentUploadAdvator()
    },

    methods: {
      talentUploadAdvator(){
        this.uploadAdvatorUrl = ' http://localhost:8088/renren-fast/telnets/talentsrepertory/talents/uploadAdvator'
      },


      //加载行业信息
      reloadIndustory(){
        this.$http({
          //url: this.$http.adornUrl('/workjobs/workjob/tree-option-ccj'),
          url: this.$http.adornUrl('/common/tradecategory/trade-category'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0){
            this.industryOptions = data.data
          }
        })
      },

      //加载地址信息
      reloadAddress(){
        this.$http({
          url: this.$http.adornUrl('/companys/company/tree-option-pcr'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0){
            this.addressOptions = data.data
          }
        })
      },
      //加载学历信息
      reloadEducation(){
        this.$http({
          url: this.$http.adornUrl('/common/education/select-option'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0){
            this.educationOption = data.data
          }
        })
      },

      init (id) {
        this.dataForm.telnetId = id || 0
        this.visible = true


        this.$http({
          url:this.$http.adornUrl('/telnets/talentsrepertory/addressOption/' + id),
          method:'get'
        })
          .then(data => {
            if (data && data.data.code === 0){
              this.addressOptionsArr = data.data.data
            }
          })


        this.$http({
          url:this.$http.adornUrl('/telnets/talentsrepertory/optionIndustory/' + id),
          method:'get'
        })
          .then(data => {
            if (data && data.data.code === 0){
              this.industryOptionsArr = data.data.data
            }
          })
        /*序列化头像*/
        this.$http({
          url:this.$http.adornUrl('/telnets/talentsrepertory/reflectTalentAdvator/' + id),
          method:'post'
        })
        .then(data => {
          console.log("data imgUrl ===> ",data)
            this.imageUrl = data.data.data
        })


        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.telnetId) {
            this.$http({
              url: this.$http.adornUrl(`/telnets/talentsrepertory/info/${this.dataForm.telnetId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              //console.log("data ===>",data)
              if (data && data.code === 0) {

                for (var i=0;i<data.telnetEducationBackgroundEntities.length;i++){
                  data.telnetEducationBackgroundEntities[i].getEducationId = data.telnetEducationBackgroundEntities[i].getEducationId.toString()
                }

                this.dataForm.telnetName = data.talentsRepertory.telnetName
                this.dataForm.telnetAge = data.talentsRepertory.telnetAge
                this.dataForm.telnetGender = data.talentsRepertory.telnetGender.toString()
                this.dataForm.educationId = data.talentsRepertory.educationId.toString()
                this.dataForm.graduateUniversity = data.talentsRepertory.graduateUniversity
                this.dataForm.phone = data.talentsRepertory.phone
                this.dataForm.wechat = data.talentsRepertory.wechat
                this.dataForm.major = data.talentsRepertory.major
                this.dataForm.workAge = data.talentsRepertory.workAge
                this.dataForm.provinceid = data.talentsRepertory.provinceid
                this.dataForm.cityid = data.talentsRepertory.cityid
                this.dataForm.areaid = data.talentsRepertory.areaid
                this.dataForm.tradeId = data.talentsRepertory.tradeId
                this.dataForm.classifyId = data.talentsRepertory.classifyId
                this.dataForm.jobTypeId = data.talentsRepertory.jobTypeId
                this.dataForm.isDeleted = data.talentsRepertory.isDeleted
                this.dataForm.createTime = data.talentsRepertory.createTime
                this.dataForm.updateTime = data.talentsRepertory.updateTime
                this.dataForm.educationList = data.telnetEducationBackgroundEntities
                this.dataForm.workTrackRecordList = data.workTrackRecordEntities
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/telnets/talentsrepertory/${!this.dataForm.telnetId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'telnetId': this.dataForm.telnetId || undefined,
                'telnetName': this.dataForm.telnetName,
                'telnetAge': this.dataForm.telnetAge,
                'telnetGender': this.dataForm.telnetGender,
                'educationId': this.dataForm.educationId,
                'graduateUniversity': this.dataForm.graduateUniversity,
                'phone': this.dataForm.phone,
                'wechat': this.dataForm.wechat,
                'major': this.dataForm.major,
                'workAge': this.dataForm.workAge,
                'provinceid': this.dataForm.provinceid,
                'cityid': this.dataForm.cityid,
                'areaid': this.dataForm.areaid,
                'tradeId': this.dataForm.tradeId,
                'classifyId': this.dataForm.classifyId,
                'jobTypeId': this.dataForm.jobTypeId,
                'isDeleted': this.dataForm.isDeleted,
                'advator':this.dataForm.advator,
                'createTime': this.dataForm.createTime,
                'updateTime': this.dataForm.updateTime,
                'educationList':this.dataForm.educationList,
                'workTrackRecordList':this.dataForm.workTrackRecordList
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
                this.reload()
              } else {
                this.$message.error(data.msg)
                this.reload()

              }
            })
          }
        })
      },


      addOneEducation(){
        const eduObj = {
          universityName: '',
          major: '',
          getEducationId: '',
          graduateTime: '',
          isDeleted: '',
          createTime: '',
          updateTime: ''
        }
        this.dataForm.educationList.push(eduObj)
      },

      addOneworkExp(){
        const workObj = {
          companyName: '',
          holdAPost: '',
          workBeginTime: '',
          workEndTime: '',
        }
        this.dataForm.workTrackRecordList.push(workObj)
      },

      //加载学历change事件
      positionEducationOptionChange(value){
        console.log("this.dataForm.positionEducation",value)
        this.dataForm.educationId = value
      },
      handleChangeIndustory(value){
        console.log("行业的value ===》",value)
        this.dataForm.tradeId = value[0]
        this.dataForm.classifyId = value[1]
        this.dataForm.jobTypeId = value[2]
      },
      handleChangeAddress(value){
        console.log("地址的value ===》",value)
        this.dataForm.provinceid = value[0]
        this.dataForm.cityid = value[1]
        this.dataForm.areaid = value[2]
      },

      handleAvatarSuccess(res, file) {

        console.log("res ==>",res)
        console.log("file ===>",file)


        this.dataForm.advator = res.pathUrl
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(this.imageUrl)
      },


      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
</script>

<style scoped>

  .advatar_container{
    background-color: #F6F6F6;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #000000;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>
